import { ref } from "vue";
// 导入查询用户接口
import { queryUser } from "@/api/userAPI";
// 导入提示方法
import { message } from "ant-design-vue";

export const useQueryUser = (data, tablePagination) => {
  // 用户名输入框双向绑定
  const username = ref("");
  // 手机号输入框双向绑定
  const mobile = ref("");
  // 定义time
  var timer = null;
  // 点击查询用户
  const handleQueryUser = () => {
    // 如果用户名和手机号为空就return
    if (username.value === "" && mobile.value === "") return;

    // 参数
    const query = {
      username: username.value.trim(),
      mobile: mobile.value.trim(),
    };

    // 如果有time就清除
    timer && clearTimeout(timer);
    // 开启定时器 阻止连续多次请求
    timer = setTimeout(() => {
      // 发送查询用户请求
      queryUser(query)
        .then((res) => {
          if (res.status === 200) {
            message.success("查询成功");
            tablePagination.total = 1;
            tablePagination.current = 1;
          }
          if (res.status === 205) {
            message.error("没有数据");
          }
          data.value = res.data;
        })
        .catch((error) => {
          throw new Error(error);
        });
    }, 2000);
  };
  return {
    username,
    mobile,
    handleQueryUser,
  };
};
